<template>
  <div>
    <van-nav-bar
      title="list"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <form action="/">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="addHistory"
        @click="xs"
      />
    </form>
    <!-- 历史记录列表 -->
    <div class="history" v-show="flag">
      <div class="history-head">
        <p>历史记录</p>
        <van-icon name="delete" @click="del"></van-icon>
      </div>
      <div class="history-list">
        <div
          class="history-list-item"
          v-for="(item, index) in this.$store.state.historyList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <goods :title="searchList"></goods>
  </div>
</template>
<script>
import goods from "../cate/goods"
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {goods},
  // 组件状态值
  data() {
    return {
      keyword: "",
      rwenqilist: [],
      flag: false,
    };
  },
  // 计算属性
  computed: {
    searchList() {
      let list = this.rwenqilist;

      return list.filter((item) => {
        return item.name.indexOf(this.keyword) > -1;
      });
    },
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    xs() {
      this.flag = true;
    },
    addHistory() {
      if (this.keyword == "") {
        return false;
      }
      this.$store.commit("addhistory", this.keyword);
      this.flag = false;
    },
    del() {
      this.$store.commit("removehistory");
    },
  },
  //生命周期
  created() {},
  mounted() {
    this.url = this.$store.state.appurl;
    this.$axios.get(`${this.url}/shop/goods/list`).then((res) => {
      this.rwenqilist = res.data;
    });
  },
};
</script> 

<style scoped lang="scss">
.yincahng {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .history-list-item {
    width: 21%;
    margin: 2%;
    line-height: 25px;
    box-sizing: border-box;
    background: #ddd;
    color: cadetblue;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.history {
  width: 100%;
  .history-head {
    width: 100%;
    display: flex;
    padding: 0px 20px;
    box-sizing: border-box;
    justify-content: space-between;
    font-size: 16px;
    margin: 10px;
    p {
      margin: 0;
    }
  }
}

</style>
